<table class="easyui-datagrid" data-options="method:'GET',url:'role',singleSelect:true" toolbar="#roleToolbar"
       id="roleTable">
    <thead>
    <tr>
        <th data-options="field:'',width: 100,checkbox:true"></th>
        <th data-options="field:'id',width: 300">编码</th>
        <th data-options="field:'name',width: 100">名称</th>
        <th data-options="field:'description',width: 100">描述</th>
    </tr>
    </thead>
</table>
<div id="roleToolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
       onclick="$('#roleAdd').dialog('open')">添加角色</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="
    var selected = $('#roleTable').datagrid('getSelected');
    if (!selected){
        $.messager.alert('警告','请选择一个角色!');
    }else{
        $('#roleEditForm').form('load',selected);
        $('#roleEdit').dialog('open');
    }
    ">编辑角色</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="
    var selected = $('#roleTable').datagrid('getSelected');
    if (!selected){
        $.messager.alert('警告','请选择一个角色!');
    }else{
        $('#authorityList').datalist('reload');
        $('#authorityList').datalist('clearSelections');
        selected['authorities'].forEach(authority=>$('#authorityList').datalist('selectRecord',authority['id']));
        $('#authorityGrant').dialog('open');
    }
    ">权限分配</a>
</div>
<div id="roleAdd" class="easyui-dialog" title="添加角色" data-options="closed:true,modal:true" style="width: 250px;height: 300px;">
    <form id="roleAddForm" method="post">
        <td><input class="easyui-textbox" type="hidden" name="id"></td>
        <table cellpadding="5">
            <tr>
                <td>名称:</td>
                <td><input class="easyui-textbox" type="text" name="name"></td>
            </tr>
            <tr>
                <td>描述:</td>
                <td><input class="easyui-textbox" type="text" name="description"></td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           onclick="$.post('role',$('#roleAddForm').serialize(),function(){$('#roleAdd').dialog('close');$('#roleTable').datagrid('reload');})">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton">重置</a>
    </div>
</div>
<div id="roleEdit" class="easyui-dialog" title="编辑角色" data-options="closed:true,modal:true" style="width: 250px;height: 300px;">
    <form id="roleEditForm" method="post">
        <td><input class="easyui-textbox" type="hidden" name="id"></td>
        <table cellpadding="5">
            <tr>
                <td>名称:</td>
                <td><input class="easyui-textbox" type="text" name="name" readonly></td>
            </tr>
            <tr>
                <td>描述:</td>
                <td><input class="easyui-textbox" type="text" name="description"></td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           onclick="$.put('role',$('#roleEditForm').serialize(),function(){$('#roleEdit').dialog('close');$('#roleTable').datagrid('reload');})">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton">重置</a>
    </div>
</div>
<div id="authorityGrant" class="easyui-dialog" title="权限分配" data-options="closed:true,modal:true" style="width: 250px;height: 350px;">
        <td><input class="easyui-textbox" type="hidden" name="id"></td>
        <table cellpadding="5">
            <tr>
                <td>
                    <ul id="authorityList" class="easyui-datalist" data-options="url:'authority',method:'GET',textField:'name',valueField:'id',singleSelect:false,idField:'id'" style="width:150px;height:200px">
                    </ul>
                </td>
            </tr>
        </table>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           onclick="$.post('role/'+$('#roleTable').datagrid('getSelected')['id']+'/authority','authorityIds='+$('#authorityList').datalist('getSelections').map(record => record['id']).join(','),function(){$('#authorityGrant').dialog('close');$('#roleTable').datagrid('reload');})">提交</a>
    </div>
</div>
